<template>
	<view>
		<view class="list" v-for="(item,index) in data" v-if="item.status == 1 && item.id != 3 && item.id != 6 && item.id != 7" :key="index">
			<view class="item flex">
				<navigator open-type="navigate" :url="'/pages/user/hlb_bill?state=' + item.id" class="flex left">
					<image class="icon" :src="item.icon"></image>
					<view class="explain">{{item.name}}</view>
					<text class="price">{{item.money}}</text>
				</navigator>
				<view class="flex">
					<!-- <navigator class="explain-cont-btn" hover-class="none" :url="item.cust_url" v-if="item.id == 4">{{item.cust_name}}</navigator> -->
					<image class="right" @tap="click(item,index,'noraml')" :src="selectIndex == index?'../../static/icons/jewel/car_select.png':'../../static/icons/jewel/car_unselect.png'"></image>
				</view>
			</view>
			<view class="explain-cont" v-if="selectIndex == index">
				<view>{{item.desc}}</view>
				<view style="display: flex; justify-content: flex-end;">
					<navigator class="explain-cont-btn" hover-class="none" :url="item.cust_url" v-if="item.cust_name">{{item.cust_name}}</navigator>
				</view>
			</view>
		</view>
		<view class="list listJin">
			<view class="item flex listJin-first" @tap="Jinclick()" >
				<view class="flex left">
					<image class="icon" :src="JinIcon"></image>
					<view class="explain">恒朗津贴</view>
					<text class="price"></text>
				</view>
				<image class="right" :class="{rightTran:showChild}" src="../../static/icons/transfer/transfer_icon.png"></image>
			</view>
			<view class="listJin-child">
				<view class="listJin-child-item flex" v-if="showChild" v-for="(item,index) in newJin" :key="index">
					<navigator open-type="navigate" :url="'/pages/user/hlb_bill?state=' + item.id" class="flex left">
						<view class="explain">{{item.name}}</view>
						<text class="price">{{item.money}}</text>
					</navigator>
					<image class="right" @tap="click(item,index,'Jin')" :src="selectJinIndex == index?'../../static/icons/jewel/car_select.png':'../../static/icons/jewel/car_unselect.png'"></image>
				</view>
			</view>
		</view>
		<view class="total-cont-bg"></view>
		<view class="total-cont">
			<view class="total-price flex">
				<view @tap="push('takecash')">{{totalData.name}}<text>￥{{totalData.money}}</text></view>
				<view class="flex">
					<!-- <navigator hover-class="none" url="/pages/pawn/product_list?type=1" class="totalBtn org" >复投</navigator> -->
					<view class="totalBtn red" @tap="push('takecash')">退取</view>
				</view>
			</view>
			<view class="subBtn" @tap="push('substitution')" :class="curdata.substitution != 0 && curdata.substitution?'cur':''">置换</view>
		</view>
		<view class="g-frame-mask" v-if="showPopup" @tap="togglePopup"></view>
		<view class="g-frame" v-if="showPopup">
		    <view class="m-frame-header">
		        <view class="u-frame-title">{{popheadText}}</view>
		        <image class="u-frame-close" src="../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup"></image>
		    </view>
			<view class="m-frame-content">
				<view class="input" v-if="!toggleCont"><input type="number" v-model="money" placeholder="请点击输入数量" /></view>
				<view class="tips" v-if="toggleCont">{{substitutionDesc}}</view>
			</view>
			<view class="m-frame-footer flex">
				<view @tap="togglePopup">取消</view>
				<view class="u-confirm" v-if="!toggleCont" @tap="toConfirm()">确定</view>
				<view class="u-confirm" v-if="toggleCont" @tap="Confirm()">确定</view>
			</view>
		</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow" />
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @change="change">
			<view class="rule-cont">
				<view class="rule-cont-head">恒朗总汇说明</view>
				<view class="rule-cont-text">
					<view class="rule-cont-text-item" v-for="(item,index) in ruleCont" :key="index">
						<text class="rule-cont-text-item-name">{{item.name}}:</text>
						<text class="rule-cont-text-item-desc">{{item.desc}}</text>
					</view>
				</view>
				<view class="rule-cont-btn" @tap="toggleRule">知道了</view>
			</view>
		</uni-transition>
		
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		
	</view>
</template>

<script>
	import hl from '@/common/common.js';
	export default {
		data() {
			return {
				selectIndex:-1,
				data:[],
				curdata:{},
				showPopup:false,
				totalData :{},
				popheadText:'转入恒朗宝',
				money:'',
				toggleCont:false,
				postData:{},
				substitutionDesc:'',
				isShowLoading: false,
				newJin:[],
				showChild:false,
				selectJinIndex:-1,
				JinIcon:'',
				modeClass:['zoom-in','fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				ruleCont:[]
			}
			
		},
		methods: {
			toggleRule(){
				this.transShow = false
			},
			change(e){
				// console.log(e)
			},
			getData(type){
				let that = this
				that.isShowLoading = true
				hl.get('Transfer/getSubstitution', {}, true, function(res) {
					let resdata = res.data;
					that.isShowLoading = false
					that.data = resdata.data
					that.totalData = resdata.total
					that.ruleCont = resdata.desc
					that.transShow = that.ruleCont.length > 0 && type == 'load'?true:false
					that.newJin = []
					for(let i in that.data){
						if(that.data[i].id == 3||that.data[i].id == 6||that.data[i].id == 7){
							that.newJin.push(that.data[i])
						}
						if(that.data[i].id == 6){
							that.JinIcon = that.data[i].icon
						}
					}
					
				});
			},
			click(data,index,type){
				this.curdata = {}
				switch(type){
					case 'noraml':
						this.selectJinIndex = -1
						this.showChild = false
						if(this.selectIndex == index){
							this.selectIndex = -1
							this.curdata.substitution = 0
							this.curdata.id = 1
						}else{
							this.selectIndex = index
							this.curdata = data
						}
					break;
					case 'Jin':
						this.selectIndex = -1
						if(this.selectJinIndex == index){
							this.selectJinIndex = -1
							this.curdata.substitution = 0
							this.curdata.id = 1
						}else{
							this.selectJinIndex = index
							this.curdata = data
						}
					break;
				}
				
			},
			Jinclick(){
				this.showChild = !this.showChild
				this.selectJinIndex = this.selectIndex = -1
				this.curdata = {}
			},
			togglePopup(){
				this.showPopup = !this.showPopup
				this.toggleCont = false
				this.money = ''
			},
			push(type){
				let that = this
				switch(type){
					case 'takecash':
						uni.navigateTo({
							url:'/pages/user/hl_takecash?state=4&pageType=hlb_wit'
						})
					break;
					case 'interturn':
						uni.navigateTo({
							url:'/pages/user/hl_transform?state=1'
						})
					break;
					case 'substitution':
						if(that.curdata.substitution != 0){
							let itemList = []
							that.curdata.substitution.forEach((item,index)=>{
								itemList.push(item.name)
							})
							if(itemList.length > 1){
								uni.showActionSheet({
									itemList: itemList,
									success: function (res) {
										that.togglePopup()
										that.popheadText = '转入' + itemList[res.tapIndex]
										that.postData.to_id = that.curdata.substitution[res.tapIndex].id
									},
									fail: function (res) {}
								});
							}else{
								that.togglePopup()
								that.popheadText = '转入'+that.curdata.substitution[0]['name']
								that.postData.to_id = that.curdata.substitution[0].id
							}
							
						}
					break;
				}
			},
			toConfirm(){
				let that = this
				if(that.money != ''){
					that.postData.from_id = that.curdata.id
					that.postData.money = that.money
					hl.get('Transfer/getSubstitutionDesc', that.postData, true, function(res) {
						let resdata = res.data;
						if(resdata.code<0)return hl.showToast(resdata.msg)
						that.toggleCont = true
						that.substitutionDesc = resdata.msg
					});
				}else{
					hl.showToast('请输入正确数量')
				}
			},
			Confirm(){
				let that = this
				that.postData.from_id = that.curdata.id
				that.postData.money = that.money
				that.togglePopup()
				that.isShowLoading = true
				hl.post('Transfer/substitution', that.postData, true, function(res) {
					that.isShowLoading = false
					hl.showToast(res.data.msg)
					if(res.data.code >= 0){
						uni.navigateTo({
							url:'/pages/user/hlb_bill?state=' + that.postData.to_id
						})
						that.getData()
					} 
				});
			}
		},
		onLoad() {
			this.getData('load')
			this.curdata.substitution = 0
			this.curdata.id = 1
		},
		onNavigationBarButtonTap(e) {
		    let that = this;
		    if (e.index === 0) {
		        uni.navigateTo({
		        	url:'/pages/user/hlb_bill?state=4'
		        })
		    }
		}
	};
</script>

<style lang="scss">
	page{
		background: #F2F2F2;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.item{
		background-color: #FFFFFF;
		justify-content: space-between;
		width: 728rpx;
		margin: 0 auto;
		height: 122rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		-webkit-box-shadow:0px 0px 14rpx rgba(215,215,215,0.34);
		box-shadow:0px 0px 14rpx rgba(215,215,215,0.34);
		padding: 0 28rpx;
		box-sizing: border-box;
		.price{
			color: #D71311;
			margin-left: 30rpx;
		}
		.left{
			font-size: 32rpx;
			color: #1f1f1f;
			.explain{
				position: relative;
				.icon{
					position: absolute;
					right: -41rpx;
					top: 0;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.right{
			width: 50rpx;
			height: 50rpx;
		}
		.icon{
			width: 45rpx;
			height: 45rpx;
			margin-right: 14rpx;
		}
	}
	
	
	.g-frame {
	    width: 580upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
	    overflow: hidden;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 12;
		.m-frame-header {
		    height: 110upx;
		    width: 100%;
		    background: #d71311;
		    border-top-right-radius: 20upx;
		    border-top-left-radius: 20upx;
			position: relative;
		}
		.u-frame-title {
			text-align: center;
		    color: #fff;
		    line-height: 110upx;
		    font-size: 32upx;
		}
		.u-frame-close {
		    width: 42upx;
		    height: 42upx;
		    position: absolute;
		    top: 34upx;
		    right: 32upx;
		}
		.m-frame-footer {
		    width: 100%;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			view {
				flex: 1;
			    text-align: center;
			    font-size: 32upx;
				line-height: 96rpx;
			}
			.u-confirm {
			    background: #d71311;
			    color: #fff;
			}
		}
		.m-frame-content{
			padding: 30rpx;
			font-size: 32rpx;
			.input{
				padding: 30upx 0;
				input{
					width: 99%;
					font-size: 40upx;
					text-align: center;
					border: 1px solid #828080;
					border-radius: 10upx;
					padding: 20upx 0;
				}
			}
			.tips{
				text-align: center;
			}
		}
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .3;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
		left: 0;
	}
	
	.explain-cont{
		color: #1f1f1f;
		font-size: 28rpx;
		margin: 30rpx 45rpx;
		position: relative;
		&-btn{
			border: 1px solid #b42424;
			padding: 0rpx 30rpx;
			line-height: 46rpx;
			border-radius: 5px;
			font-size: 30rpx;
			color: #b42424;
			margin-top: 20rpx;
			margin-right: 20rpx;
			display: inline-block;
		}
	}
	.total-cont-bg{
		width: 100%;
		height: 250rpx;
	}
	.total-cont{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		.subBtn{
			background-color: #CCCCCC;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 98rpx;
			&.cur{
				background-color: #b42424;
			}
		}
		
		.total-price{
			color: #1f1f1f;
			font-size: 30rpx;
			justify-content: space-between;
			padding: 35rpx 30rpx;
			text{
				color: #b42424;
				font-size: 32rpx;
				margin-left: 20rpx;
			}
		}
		.totalBtn{
			width: 136rpx;
			line-height: 46rpx;
			font-size: 30rpx;
			border: 1px solid #FFFFFF;
			text-align: center;
			border-radius: 5px;
			margin-left: 8rpx;
		}
		.red{
			color: #b42424;
			border-color: #b42424;
		}
		.org{
			color: #f36c2a;
			border-color: #f36c2a;
		}
	}
	.no{
		display: none;
	}
	.listJin{
		&-first{
			.right{
				width: 12rpx;
				height: 21rpx;
				transform: scale(1.8);
				margin-right: 17rpx;
				transition: all .3s;
			}
			.rightTran{
				transform: scale(1.8) rotate(90deg);
			}
		}
		&-child{
			width: 728rpx;
			margin: 0 auto;
			&-item{
				justify-content: space-between;
				font-size: 30rpx;
				height: 94rpx;
				border-bottom: 1px solid #ededed;
				width: 646rpx;
				margin: 0 auto;
				.explain{
					color: #1f1f1f;
					margin-left: 12rpx;
					margin-right: 24rpx;
				}
				.price{
					color: #d71511;
				}
			}
			.right{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
	.rule-cont{
		background-color: #FFFFFF;
		width: 572rpx;
		border-radius: 40rpx;
		overflow: hidden;
		&-head{
			background-image: url(../../static/images/jewel/rule_head.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 155rpx;
			font-size: 38rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 120rpx;
		}
		&-text{
			width: 490rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			&-item{
				line-height: 42rpx;
				font-size: 30rpx;
				margin: 8rpx 0;
				&-name{
					color: #d71511;
					margin-right: 20rpx;
				}
			}
		}
		&-btn{
			width: 305rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #d71511;
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			border-radius: 50px;
			margin: 30rpx auto;
			box-shadow:0px 4rpx 28rpx rgba(251,85,82,0.81);
		}
	}
</style>
